<template>
  <Layout>
    <Menu
      mode="horizontal"
      theme="dark"
      :style="{ position: 'fixed', bottom: 0, left: 0, right: 0 }"
      @on-select="onSelect"
    >
      <Submenu name="part1">
        <template #title>
          <Icon type="ios-keypad"></Icon>
          {{ book }}
        </template>
        <MenuItem
          v-for="(item, index) in pages"
          :key="index"
          :name="`book.${index}`"
        >
          {{ item }}
        </MenuItem>
      </Submenu>
      <Submenu
        :name="`${index}`"
        v-for="(item, index) in catalogues"
        :key="index"
      >
        <template #title>
          <Icon type="ios-keypad"></Icon>
          {{ item.title }}
        </template>
        <MenuItem
          :name="`${index}.${j}`"
          v-for="(it, j) in item.items"
          :key="j"
        >
          {{ it.title }}
          <Tag v-if="it.code" color="magenta">示例</Tag>
        </MenuItem>
      </Submenu>
    </Menu>
    <Content id="webgl-output" :style="{ marginBottom: '60px' }" />
  </Layout>
</template>

<script>
import * as book from '@/book';

export default {
  name: 'Catalogues',
  data() {
    return {
      book: 'Three.js 开发指南',
      pages: [
        '基于 WebGl 和 HTML5 在网页上渲染 3D 图形和动画',
        '图书在版 (CIP) 数据',
        '译者序',
        '前言',
        '目录'
      ],
      catalogues: [
        {
          title: '第1章',
          items: [
            {
              title: '1.1 准备工作',
              code: undefined
            },
            {
              title: '1.2 获取源码',
              code: undefined
            },
            {
              title: '1.2.1 通过Git获取代码仓库',
              code: undefined
            },
            {
              title: '1.2.2 下载并解压档案文件',
              code: undefined
            },
            {
              title: '1.2.3 测试示例',
              code: undefined
            },
            {
              title: '1.3 搭建HTML框架',
              code: book.chapter01.init01
            },
            {
              title: '1.4 渲染并查看三维对象',
              code: book.chapter01.init02
            },
            {
              title: '1.5 添加材质、光源和阴影效果',
              code: book.chapter01.init03
            },
            {
              title: '1.6 让你场景动起来',
              code: undefined
            },
            {
              title: '1.6.1 引入requestAnminiationFrame()方法',
              code: book.chapter01.init04
            },
            {
              title: '1.6.2 旋转立方体',
              code: book.chapter01.init05
            },
            {
              title: '1.6.3 弹跳球',
              code: book.chapter01.init06
            },
            {
              title: '1.7 使用dat.GUI简化试验流程',
              code: book.chapter01.init07
            },
            {
              title: '1.8 场景对浏览器的自适应',
              code: book.chapter01.init08
            },
            {
              title: '1.9 总结',
              code: undefined
            }
          ]
        },
        {
          title: '第2章',
          items: [
            {
              title: '2.1 创建场景',
              code: undefined
            },
            {
              title: '2.1.1 场景的基本功能',
              code: book.chapter02.init01
            },
            {
              title: '2.1.2 给场景添加雾化效果',
              code: book.chapter02.init02
            },
            {
              title: '2.1.3 使用 overrideMaterial 属性',
              code: book.chapter02.init03
            },
            {
              title: '2.2 几何体和网络',
              code: book.chapter02.init04
            },
            {
              title: '2.2.1 几何体的属性和方法',
              code: book.chapter02.init05
            },
            {
              title: '2.2.2 网络对象的属性和方法',
              code: book.chapter02.init06
            },
            {
              title: '2.3 选择合适的摄像机',
              code: undefined
            },
            {
              title: '2.3.1 正交投影摄像机和透视投影摄像机',
              code: book.chapter02.init07
            },
            {
              title: '2.3.2 将摄像机聚焦在指定点上',
              code: book.chapter02.init08
            },
            {
              title: '2.4 小结',
              code: book.chapter02.init08
            }
          ]
        },
        {
          title: '第3章',
          items: [
            {
              title: '3.1 Three.js 中不同种类的光源',
              code: undefined
            },
            {
              title: '3.2 基础光源',
              code: undefined
            },
            {
              title: '3.2.1 THREE.AmbientLight',
              code: book.chapter03.init01
            },
            {
              title: '3.2.2 SpotLight',
              code: book.chapter03.init02
            },
            {
              title: '3.2.3 THREE.PointLIght',
              code: book.chapter03.init03
            },
            {
              title: '3.2.4 THREE.DirectionalLight',
              code: book.chapter03.init04
            }
          ]
        }
      ]
    };
  },
  methods: {
    onSelect(e) {
      try {
        const webgl = this.remove();
        const values = e.split('.');
        const i = Number(values[0]);
        const j = Number(values[1]);
        const func = this.catalogues[i].items[j].code;
        const { offsetWidth, offsetHeight } = webgl;
        func(offsetWidth, offsetHeight);
      } catch {
        this.remove();
      }
    },
    remove() {
      document
        .querySelectorAll('body > div:not(#app)')
        .forEach(item => item.remove());
      const webgl = document.getElementById('webgl-output');
      webgl?.firstChild?.remove();
      return webgl;
    }
  }
};
</script>

<style scoped></style>
